<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <style>
        body {
            padding-bottom: 800px;
        }
    </style>
</head>

<body>
    <input type="button" id="mount" value="挂载vue实例">
    <input type="button" id="unmount" value="卸载vue实例">
    <hr>
    <div id="app">
        <!-- <p>msg:{{ msg }}</p>
        <input v-model="msg" type="text" /> -->
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";

        const creareVueApp = function () {
            return createApp({
                template:`
                    <p>msg:{{ msg }}</p>
                    <input v-model="msg" type="text" />
                `,
                data() {
                    return {
                        msg:"测试数据"
                    }
                }
            })
        }
        // creareVueApp().mount("#app")
        let btn1 = document.querySelector("#mount")
        let btn2 = document.querySelector("#unmount")
        let app = null;
        btn1.addEventListener("click",function(){
            if(app) return;
            app = creareVueApp();
            app.mount("#app")
        })
        btn2.addEventListener("click",function(){
            if(app){
                app.unmount();
                app = null;
            }
        })
    </script>
</body>

</html>